<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id = "box" style = "position:absolute">
    <p>1</p>
    <p>2</p>
    <p id = "para">3</p>
    <p>4</p>
    <p>5</p>
</div>
<script>
    let box = document.querySelector("#box")
    let para = document.querySelector("#para")
    //console.log(box,para)
    /*
    * 1.封装ie6也能兼容的”寻找该元素节点下面所有的子元素节点“函数
    *
    * */
    function getChildren(node){ //接收一个node节点元素
        //准备一个结果数组
        let children = []

        //协议for循环 遍历所有childNodes 因为在ie6里面可以用childNodes方法
        for(let i = 0;i < node.childNodes.length;i++){
            if(node.childNodes[i].nodeType === 1){ //元素节点的nodeType等于1，所以找到等于1的就是元素节点
                children.push(node.childNodes[i])
            }
        }

        return children
    }
    console.log(getChildren(box))

    /*
    * 2.封装ie6也能兼容的”寻找前一个兄弟元素节点“
    *
    * */
    function getElementPrevSibling(node){
        //先定义一个变量保存接收的节点
        let o = node

        //该节点的前一个节点存在，即前一个节点值不为null的情况：
        //使用while循环，找到该节点所有兄弟节点
        while(o.previousSibling != null){ //ie6可以使用previousSibling方法，即找到前一个兄弟节点
            if(o.previousSibling.nodeType === 1){ //如果该元素节点的前一个兄弟节点的类型等于1
                return o.previousSibling //就返回前一个兄弟节点，这个兄弟节点就是我们要的兄弟元素节点
            }

            //如果该节点的前一个兄弟节点是空文本节点，将该节点的前一个兄弟空文本节点赋值给这个节点，就是else的情况
            o = o.previousSibling //成为空文本节点之后，再去调用while循环，再度寻找前一个兄弟元素节点

        }

        //该节点前一个节点不存在，即前一个节点值为null的情况，就是没有进入while循环的情况
        return null //直接 return null

    }
    console.log(getElementPrevSibling(para))
    /*
    * 例如这里传入的元素节点是第三个para元素节点，变量o保存了该元素节点的值，进入while循环，变量o前一个兄弟节点是介于2元素节点和3元素节点中间的
    * 空白文本节点，类型等于3，进入第二个if判断，这时将变量o的值重新赋值为前一个兄弟节点即空白文本节点，再次进入while循环，这一次空白文本节点的
    * 前一个兄弟节点是p标签2元素节点，类型等于1，满足第一个if判断，进入该判断，return返回该空白文本节点的前一个兄弟元素节点2，结束循环与函数
    * */


    /*
    * 3.封装ie6也能兼容的获取某元素节点的所有的兄弟元素节点
    * 用两个数组，一个数组遍历前面的所有兄弟元素节点，一个数组遍历后面的所有兄弟元素节点，两个数组组合起来返回
    *
    * */
    function getAllElementsSibling(node){
        let o = node
        //遍历前面的兄弟元素节点
        let pre = []
        //while循环遍历这个元素节点之前的所有兄弟元素节点
        while(o.previousSibling != null){ //ie6可以使用previousSibling方法，即找到前一个兄弟节点
            if(o.previousSibling.nodeType === 1){ //如果该元素节点的前一个兄弟节点的类型等于1
                pre.unshift(o.previousSibling)  //前数组就添加前一个兄弟节点，这个兄弟节点就是我们要的兄弟元素节点
            }

            //如果该节点的前一个兄弟节点是空文本节点，将该节点的前一个兄弟空文本节点赋值给这个节点,就是else的情况
            o = o.previousSibling //成为空文本节点之后，再去调用while循环，再度寻找前一个兄弟元素节点
        }

        //变量后面的兄弟元素节点
        o = node //上一个while循环结束之后，o的值变成了null，所以要重新赋值
        let next = []
        while(o.nextSibling != null){ //ie6可以使用nextSibling方法，即找到后一个兄弟节点
            if(o.nextSibling.nodeType === 1){ //如果该元素节点的后一个兄弟节点的类型等于1
                next.push(o.nextSibling)  //后数组就添加后一个兄弟节点，这个兄弟节点就是我们要的兄弟元素节点
            }

            //如果该节点的前一个兄弟节点是空文本节点，将该节点的后一个兄弟空文本节点赋值给这个节点,就是else的情况
            o = o.nextSibling //成为空文本节点之后，再去调用while循环，再度寻找后一个兄弟元素节点
        }

        //最终两个循环结束，返回前一个数组拼接后一个数组的值
        return pre.concat(next)
    }
    console.log(getAllElementsSibling(para))

</script>
</body>
</html>